<template>
  <view class="messageCenter">
    <view class="messageCenter_wrapper">
      <view class="title_wrapper">
        <image src="/static/messageCenter/2.png"></image>
        <view class="header_">
          <view class="header_wrapper">
            <view class="left_" v-if="toggle === 1">佣金通知</view>
            <view class="left_" v-if="toggle === 2">系统通知</view>
            <view class="right_" @tap.stop="cleanUpFn">
              <image src="/static/messageCenter/1.png"></image>
              清除未读
            </view>
          </view>
          <view class="header_info">
            <view class="left_ message_" @tap.stop="noticeFn(1)">
              <image
                src="http://test.api.ylnumber.cn/file/test/productImage/20230711/3172ac885f234559b32498e6215005d6.png"
              ></image>
              <view>
                <image src="/static/messageCenter/5.png" />
                <text>佣金通知</text>
              </view>
            </view>
            <view class="right_ message_" @tap.stop="noticeFn(2)">
              <image
                src="http://test.api.ylnumber.cn/file/test/productImage/20230711/9c215f952c62485782a30c3c46256d97.png"
              ></image>
              <view>
                <image src="/static/messageCenter/5.png" />
                <text>系统通知</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="main_">
        <view class="main_wrapper" v-if="toggle === 1">
          <u-swipe-action
            :show="item.show"
            :index="index"
            v-for="(item, index) in list"
            :key="index"
            @click="click"
            @open="open"
            :options="options"
            :vibrate-short="true"
            class="swipe_wrapper"
          >
            <view class="item_wrapper" @tap.stop="itemMessage(item, '1')">
              <view class="image_">
                <!--                <image src="/static/messageCenter/6.png"></image>-->
                <image :src="item.coverurl"></image>
                <text v-if="item.isRead === 0"></text>
              </view>
              <view class="right_wrapper">
                <view class="title_wrapper">
                  <!--                  <view class="title_">结算佣金消息提醒</view>-->
                  <view class="title_"
                    >结算佣金消息提醒 ￥<text>{{
                      item.money || ""
                    }}</text></view
                  >
                  <view class="time_">{{ item.createTime || "" }} </view>
                </view>
                <view class="content_"
                  >账户产生一份待结算佣金，请注意查收！</view
                >
              </view>
            </view>
          </u-swipe-action>
          <u-loadmore
            v-if="list.length > 0"
            :status="status"
            :icon-type="iconType"
            :load-text="loadText"
            @loadmore="loadNextFn"
          />
          <view class="image_wrapper" v-if="list.length === 0">
            <image src="/static/None/none_data.png"></image>
            <text>暂无消息喔~</text>
          </view>
        </view>
        <view class="main_wrapper" v-if="toggle === 2">
          <u-swipe-action
            :show="item.show"
            :index="index"
            v-for="(item, index) in list2"
            :key="index"
            @click="click2"
            @open="open2"
            :options="options"
            :vibrate-short="true"
            class="swipe_wrapper"
          >
            <view class="item_wrapper" @tap.stop="itemMessage(item, '2')">
              <view class="image_">
                <!--                <image src="/static/messageCenter/9.png"></image>-->
                <image :src="item.coverurl"></image>
                <text v-if="item.isRead === 0"></text>
              </view>
              <view class="right_wrapper">
                <view class="title_wrapper">
                  <view class="title_">反馈结果通知</view>
                  <!--                  <view class="title_">粉丝加入：{{ item.phone || "" }}</view>-->
                  <view class="time_"> {{ item.createTime || "" }} </view>
                </view>
                <view class="content_">您有新的粉丝加入，点击查看详情！</view>
              </view>
            </view>
          </u-swipe-action>
          <u-loadmore
            v-if="list2.length > 0"
            :status="status"
            :icon-type="iconType"
            :load-text="loadText"
            @loadmore="loadNextFn"
          />
          <view class="image_wrapper" v-if="list2.length === 0">
            <image src="/static/None/none_data.png"></image>
            <text>暂无消息喔~</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  delMessageDelete,
  readAllMessage,
  readMessage,
  selMessage,
} from "@/api/messageCenter";

export default {
  name: "index",
  data() {
    return {
      toggle: 1,
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
      status: "loadmore",
      iconType: "flower",
      loadText: {
        loadmore: "点击加载更多",
        loading: "正在加载，请喝杯茶...",
        nomore: "哼~😕我也是有底线的~",
        //哼~😕我也是有底线的~
        //😕我也是有底线的~
      },
      list: [],
      list2: [],
      params: {
        size: 10,
        current: 1,
        userId: "",
        type: 1, //	0 -> 增加粉丝；1 -> 增加佣金
      },
      subscribeTo1: false,
      subscribeTo2: false,
    };
  },
  onShow() {
    this.params.userId = uni.getStorageSync("userId") || "";
    this.listType1();
    this.listType2();
  },
  //下拉刷新
  onPullDownRefresh() {
    uni.showLoading({
      title: "正在刷新...",
    });
    this.params.current = 1;
    this.params.size = 10;
    if (this.toggle === 1) {
      //佣金通知
      this.list = [];
      this.listType1();
    } else {
      //粉丝通知
      this.list2 = [];
      this.listType2();
    }
  },
  //上拉
  onReachBottom() {
    console.log("触发上拉加载");
    if (this.toggle === 1) {
      //佣金通知
      this.listType1();
    } else {
      //粉丝通知
      this.listType2();
    }
  },
  methods: {
    //点击组件触发上拉加载
    loadNextFn() {
      if (this.toggle === 1) {
        //佣金通知
        this.listType1();
      } else {
        //粉丝通知
        this.listType2();
      }
    },

    //清除全部未读
    cleanUpFn() {
      uni.showModal({
        title: "温馨提示",
        content: "是否确认清除未读消息？",
        // showCancel: false,
        confirmText: "确认",
        cancelText: "取消",
        success: async (res) => {
          if (res.confirm) {
            const params = {
              userId: this.params.userId,
              type: this.toggle === 1 ? 1 : 0,
            };
            console.log(params, "111");
            const res = await readAllMessage(params);
            if (res.code === 0) {
              this.params.current = 1;
              this.params.size = 10;
              if (this.toggle === 1) {
                //佣金通知
                this.list = [];
                await this.listType1();
              } else {
                //粉丝通知
                this.list2 = [];
                await this.listType2();
              }
            }
          }
        },
      });
    },

    async itemMessage(item, status) {
      console.log(item, "item");
      //标记已读
      await readMessage(item.id);
      if (status === "1") {
        uni.navigateTo({
          url: "/pages/subpackage/commission/index",
        });
      } else {
        uni.navigateTo({
          url: "/pages/subpackage/fanManagement/index",
        });
      }
    },

    noticeFn(num) {
      this.toggle = num;
      if (num === 1) {
        //佣金通知
        this.params.current = 1;
        this.list = [];
        this.listType1();
        uni.requestSubscribeMessage({
          tmplIds: ["riO3k_Jqq0oM5CyMEZQ0U8__wWLVd-Upa2SHPL84VGU"],
          success: (res) => {
            console.log("弹窗", res);
            if (
              res["riO3k_Jqq0oM5CyMEZQ0U8__wWLVd-Upa2SHPL84VGU"] === "accept"
            ) {
              if (!this.subscribeTo1) {
                this.subscribeTo1 = true;
                uni.showToast({
                  title: "订阅成功",
                  icon: "none",
                });
              }
            }
          },
        });
      } else if (num === 2) {
        //粉丝通知
        this.params.current = 1;
        this.list2 = [];
        this.listType2();
        uni.requestSubscribeMessage({
          tmplIds: ["9mWZSibSJB3bkNjiRBQPzb7yqPTQRr8wlw8HKKjIBx0"],
          success: (res) => {
            console.log("弹窗", res);
            if (
              res["9mWZSibSJB3bkNjiRBQPzb7yqPTQRr8wlw8HKKjIBx0"] === "accept"
            ) {
              if (!this.subscribeTo2) {
                this.subscribeTo2 = true;
                uni.showToast({
                  title: "订阅成功",
                  icon: "none",
                });
              }
            }
          },
        });
      }
    },

    async listType1() {
      this.status = "loading";
      this.params.type = 1;
      const res = await selMessage(this.params);
	// chiak去掉
	 if(!res.data){
		return 
	 }
	  //
      console.log(res, "查询消息中心");
      if (res.code === 0 && res.data.records.length !== 0) {
        this.list.push(...res.data.records);
        if (res.data.records.length === 0) {
          setTimeout(() => {
            this.status = "nomore";
          }, 800);
          return;
        }

        if (res.data.records.length >= this.params.size) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
          return;
        }

        if (this.list.length <= this.params.size) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
        } else if (
          res.data.records.length !== 0 &&
          res.data.records.length < this.params.size
        ) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
          return;
        }
      } else {
        setTimeout(() => {
          this.status = "nomore";
        }, 800);
      }
    },

    async listType2() {
      this.status = "loading";
      this.params.type = 0;
      const res = await selMessage(this.params);
      console.log(res, "查询消息中心");
	  // chiak去掉
	   if(!res.data){
	  	return 
	   }
      if (res.code === 0 && res.data.records.length !== 0) {
        this.list2.push(...res.data.records);
        if (res.data.records.length === 0) {
          setTimeout(() => {
            this.status = "nomore";
          }, 800);
          return;
        }

        if (res.data.records.length >= this.params.size) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
          return;
        }

        if (this.list2.length <= this.params.size) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
        } else if (
          res.data.records.length !== 0 &&
          res.data.records.length < this.params.size
        ) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
          return;
        }
      } else {
        setTimeout(() => {
          this.status = "nomore";
        }, 800);
      }
    },

    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    open2(index) {
      console.log(index, "open");
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      const data = JSON.parse(JSON.stringify(this.list2));
      if (data[index].show === true) {
        data[index].show = false;
      } else {
        data[index].show = true;
      }
      // data[index].show = true;
      data.forEach((val, idx) => {
        console.log(idx, "idx");
        if (index != idx) data[idx].show = false;
      });

      this.list2 = data;

      console.log(this.list2, "滑动");
    },
    async click2(index, index1) {
      console.log(index, index1, "点击");
      if (index1 == 0) {
        const list = this.list2[index];
        const params = list.id;

        console.log(params, "params");

        uni.showModal({
          title: "温馨提示",
          content: "是否确认删除该消息？",
          // showCancel: false,
          confirmText: "确认",
          cancelText: "取消",
          success: async (res) => {
            if (res.confirm) {
              const res = await delMessageDelete(params);
              console.log(res, "删除");
              if (res.code === 0) {
                this.list2.splice(index, 1);
                this.$u.toast(`删除成功`);
              }
            }
          },
        });
      }
    },

    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    open(index) {
      console.log(index, "open");
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      const data = JSON.parse(JSON.stringify(this.list));
      if (data[index].show === true) {
        data[index].show = false;
      } else {
        data[index].show = true;
      }
      // data[index].show = true;
      data.forEach((val, idx) => {
        console.log(idx, "idx");
        if (index != idx) data[idx].show = false;
      });

      this.list = data;

      console.log(this.list, "滑动");
    },
    async click(index, index1) {
      console.log(index, index1, "点击");
      if (index1 == 0) {
        const list = this.list[index];
        const params = list.id;

        uni.showModal({
          title: "温馨提示",
          content: "是否确认删除该消息？",
          // showCancel: false,
          confirmText: "确认",
          cancelText: "取消",
          success: async (res) => {
            if (res.confirm) {
              const res = await delMessageDelete(params);
              console.log(res, "删除");
              if (res.code === 0) {
                this.list.splice(index, 1);
                this.$u.toast(`删除成功`);
              }
            }
          },
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.messageCenter {
  .messageCenter_wrapper {
    min-height: 100vh;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    > .title_wrapper {
      display: flex;
      flex-direction: column;
      position: relative;
      > image {
        width: rpx(375);
        height: rpx(240);
        vertical-align: middle;
      }
      > view.header_ {
        position: absolute;
        //top: rpx(24);
        //left: rpx(12);
        padding: rpx(24) rpx(12) rpx(0);
        display: flex;
        flex-direction: column;
        > .header_wrapper {
          display: flex;
          > .left_ {
            font-size: rpx(20);
            font-weight: bold;
            color: #353535;
            margin-right: rpx(8);
          }
          > .right_ {
            background: rgba(255, 255, 255, 0.7);
            border-radius: rpx(13);
            border: rpx(1) solid #ffffff;
            padding: rpx(4) rpx(10) rpx(3);
            display: flex;
            align-items: center;
            font-size: rpx(13);
            font-weight: 400;
            color: #353535;
            > image {
              width: rpx(12);
              height: rpx(12);
              vertical-align: middle;
              margin-right: rpx(2);
            }
          }
        }
        > .header_info {
          margin-top: rpx(12);
          display: flex;
          width: 100%;
          > .left_ {
            width: rpx(171);
            height: rpx(80);
            background: linear-gradient(134deg, #fa8866 0%, #f54757 100%);
            border-radius: rpx(10);
            overflow: hidden;
            > image {
              width: 100%;
              height: 100%;
              vertical-align: middle;
            }
          }
          > .right_ {
            margin-left: rpx(9);
            width: rpx(171);
            height: rpx(80);
            background: linear-gradient(134deg, #22b7ee 0%, #3b99f6 100%);
            border-radius: rpx(10);
            overflow: hidden;
            > image {
              width: 100%;
              height: 100%;
              vertical-align: middle;
            }
          }
          > .message_ {
            position: relative;
            > view {
              position: absolute;
              top: rpx(12);
              left: rpx(12);
              display: flex;
              flex-direction: column;
              > image {
                width: rpx(12);
                height: rpx(12);
                vertical-align: middle;
              }
              > text {
                font-size: rpx(20);
                font-weight: bold;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
    > .main_ {
      margin-top: rpx(-90);
      display: flex;
      flex: 1;
      flex-direction: column;
      ::v-deep .swipe_wrapper {
        .u-swipe-action {
          background: transparent !important;
        }
      }
      .main_wrapper {
        padding: rpx(0) rpx(12);
        flex: 1;
        display: flex;
        flex-direction: column;
        .image_wrapper {
          display: flex;
          flex: 1;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          > image {
            width: rpx(222);
            height: rpx(158);
			margin-top: rpx(-20);
          }
          > text {
            font-size: rpx(13);
            font-weight: 400;
            color: #b2b2b2;
          }
        }

        .item_wrapper {
          padding: rpx(16) rpx(12);
          display: flex;
          background: #ffffff;
          border-radius: rpx(5);
          margin-bottom: rpx(8);
          > .image_ {
            margin-right: rpx(8);
            position: relative;
            > image {
              width: rpx(40);
              height: rpx(40);
              vertical-align: middle;
            }
            > text {
              position: absolute;
              top: 0;
              right: 0;
              width: rpx(10);
              height: rpx(10);
              background: #fa5151;
              border-radius: 50%;
              border: rpx(1) solid #ffffff;
            }
          }
          > .right_wrapper {
            display: flex;
            flex-direction: column;
            flex: 1;
            justify-content: space-between;
            > .title_wrapper {
              display: flex;
              justify-content: space-between;
              width: 100%;
              > .title_ {
                font-size: rpx(15);
                font-weight: bold;
                color: #353535;
              }
              > .time_ {
                font-size: rpx(12);
                font-weight: 400;
                color: #b2b2b2;
              }
            }
            > .content_ {
              font-size: rpx(13);
              font-weight: 400;
              color: #888888;
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1; /*最大行数*/
            }
          }
        }
      }
    }
  }
}
</style>
